<template>
    <div class="account-detail-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-left">
                <Button type="text" @click="goBack" class="back-btn">
                    <Icon type="ios-arrow-back" size="20" />
                    返回
                </Button>
                <div class="header-title">
                    <h2>账号详情</h2>
                </div>
            </div>
        </div>

        <!-- 账号信息卡片 -->
        <Card class="account-info-card" :bordered="false">
            <div class="account-info">
                <div class="account-header">
                    <div class="account-avatar">
                        <Icon type="ios-person" size="40" color="#2d8cf0" />
                    </div>
                    <div class="account-basic">
                        <h3 class="account-name">{{ accountInfo.name }}</h3>
                        <div class="account-meta">
                            <Tag :color="getPlatformColor(accountInfo.platform_type)">
                                {{ getPlatformText(accountInfo.platform_type) }}
                            </Tag>
                            <Tag :color="accountInfo.is_online ? 'success' : 'default'">
                                {{ accountInfo.is_online ? '在线' : '离线' }}
                            </Tag>
                            <Tag :color="accountInfo.is_logged_in ? 'success' : 'warning'">
                                {{ accountInfo.is_logged_in ? '已登录' : '未登录' }}
                            </Tag>
                        </div>
                    </div>
                    <div class="account-actions">
                        <Dropdown @on-click="handleRunAction">
                            <Button type="primary">
                                运行
                                <Icon type="ios-arrow-down"></Icon>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem v-for="action in actionMenuList" :key="action.value" :name="action.value">
                                    <Icon :type="action.icon"></Icon>
                                    {{ action.label }}
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </div>
                <div class="account-details">
                    <Row :gutter="16">
                        <Col span="8">
                        <div class="detail-item">
                            <span class="label">设备SN码：</span>
                            <span class="value">{{ accountInfo.sn_code }}</span>
                        </div>
                        </Col>
                        <Col span="8">
                        <div class="detail-item">
                            <span class="label">登录名：</span>
                            <span class="value">{{ accountInfo.login_name }}</span>
                        </div>
                        </Col>
                        <Col span="8">
                        <div class="detail-item">
                            <span class="label">搜索关键词：</span>
                            <span class="value">{{ accountInfo.keyword || '-' }}</span>
                        </div>
                        </Col>
                        <Col span="8">
                        <div class="detail-item">
                            <span class="label">创建时间：</span>
                            <span class="value">{{ formatDateTime(accountInfo.create_time) }}</span>
                        </div>
                        </Col>
                        <Col span="8">
                        <div class="detail-item">
                            <span class="label">最后更新：</span>
                            <span class="value">{{ formatDateTime(accountInfo.last_modify_time) || '-' }}</span>
                        </div>
                        </Col>
                    </Row>
                </div>
            </div>
        </Card>

        <!-- Tab 切换区域 -->
        <Card class="tabs-card" :bordered="false">
            <Tabs v-model="activeTab" @on-click="handleTabChange">
                <div slot="extra" class="tabs-extra">
                    <Button type="primary" icon="ios-refresh" @click="handleRefresh">刷新</Button>
                </div>
                <TabPane name="tasks" label="任务列表">
                    <div class="tab-content">
                        <div class="tab-body">
                            <tables :columns="taskColumns" :value="tasksData" :loading="tasksLoading"
                                :pageOption="tasksPageOption" @changePage="queryTasks">
                            </tables>
                        </div>
                    </div>
                </TabPane>

                <TabPane name="commands" label="指令列表">
                    <div class="tab-content">
                        <div class="tab-body">
                            <tables :columns="commandColumns" :value="commandsData" :loading="commandsLoading"
                                :pageOption="commandsPageOption" @changePage="queryCommands">
                            </tables>
                        </div>
                    </div>
                </TabPane>
            </Tabs>
        </Card>

        <!-- 指令详情弹窗 -->
        <Modal v-model="commandDetailVisible" title="指令详情" width="60%" :mask-closable="false"
            @on-cancel="closeCommandDetail">
            <div v-if="currentCommandDetail" class="command-detail-content">
                <Row :gutter="16">
                    <Col span="12">
                    <div class="detail-item">
                        <span class="label">指令ID：</span>
                        <span class="value">{{ currentCommandDetail.id }}</span>
                    </div>
                    </Col>
                    <Col span="12">
                    <div class="detail-item">
                        <span class="label">序号：</span>
                        <span class="value">{{ currentCommandDetail.sequence }}</span>
                    </div>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                    <div class="detail-item">
                        <span class="label">指令类型：</span>
                        <Tag :color="getCommandTypeColor(currentCommandDetail.command_type)">
                            {{ currentCommandDetail.command_type }}
                        </Tag>
                    </div>
                    </Col>
                    <Col span="12">
                    <div class="detail-item">
                        <span class="label">指令名称：</span>
                        <span class="value">{{ currentCommandDetail.command_name }}</span>
                    </div>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                    <div class="detail-item">
                        <span class="label">状态：</span>
                        <Tag :color="getCommandStatusColor(currentCommandDetail.status)">
                            {{ getCommandStatusText(currentCommandDetail.status) }}
                        </Tag>
                    </div>
                    </Col>
                    <Col span="12">
                    <div class="detail-item">
                        <span class="label">执行时长：</span>
                        <span class="value">{{ getExecutionTime(currentCommandDetail.duration) }}</span>
                    </div>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                    <div class="detail-item">
                        <span class="label">重试次数：</span>
                        <span class="value">{{ currentCommandDetail.retry_count || 0 }}</span>
                    </div>
                    </Col>
                    <Col span="12">
                    <div class="detail-item">
                        <span class="label">创建时间：</span>
                        <span class="value">{{ formatDateTime(currentCommandDetail.create_time) }}</span>
                    </div>
                    </Col>
                </Row>

                <!-- 指令参数 -->
                <div v-if="currentCommandDetail.parameters" class="detail-section">
                    <h4 class="section-title">指令参数</h4>
                    <div class="code-block ">
                        <pre>{{ formatJSON(currentCommandDetail.parameters) }}</pre>
                    </div>
                </div>

                <!-- 执行结果 -->
                <div v-if="currentCommandDetail.result" class="detail-section">
                    <h4 class="section-title">执行结果</h4>
                    <div class="code-block" style="min-height: 400px;">
                        <pre>{{ formatJSON(currentCommandDetail.result) }}</pre>
                    </div>
                </div>

                <!-- 错误信息 -->
                <div v-if="currentCommandDetail.error_message" class="detail-section">
                    <h4 class="section-title error-title">错误信息</h4>
                    <div class="error-block">
                        <pre>{{ currentCommandDetail.error_message }}</pre>
                    </div>
                </div>

                <!-- 截图信息 -->
                <div v-if="currentCommandDetail.screenshot_path" class="detail-section">
                    <h4 class="section-title">执行截图</h4>
                    <div class="screenshot-block">
                        <img :src="currentCommandDetail.screenshot_path" alt="执行截图" class="screenshot-img"
                            @error="handleImageError" />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button @click="closeCommandDetail">关闭</Button>
            </div>
        </Modal>

        <!-- 二维码弹窗 -->
        <Modal v-model="qrCodeVisible" title="登录二维码" width="500" :mask-closable="false" @on-cancel="closeQrCode">
            <div class="qr-code-content">
                <div v-if="qrCodeLoading" class="qr-code-loading">
                    <Icon type="ios-loading" size="40" class="loading-icon" />
                    <p>正在获取二维码...</p>
                </div>
                <div v-else-if="qrCodeError" class="qr-code-error">
                    <Icon type="ios-close-circle" size="40" color="#ed4014" />
                    <p>{{ qrCodeError }}</p>
                </div>
                <div v-else-if="qrCodeData" class="qr-code-display">
                    <div v-if="qrCodeData.qrCode || qrCodeData.qr_code_url || qrCodeData.oos_url || qrCodeData.image || qrCodeData.data"
                        class="qr-code-image">
                        <img :src="qrCodeData.qrCode || qrCodeData.qr_code_url || qrCodeData.oos_url || qrCodeData.image || qrCodeData.data"
                            alt="登录二维码" @error="handleQrCodeImageError" />
                    </div>
                    <div v-else class="qr-code-text">
                        <pre>{{ formatJSON(qrCodeData) }}</pre>
                    </div>
                    <div class="qr-code-tip">
                        <p>请使用手机扫描二维码登录</p>
                        <p v-if="qrCodeData.qr_code_url || qrCodeData.oos_url || qrCodeData.url" class="qr-code-url">
                            {{ qrCodeData.qr_code_url || qrCodeData.oos_url || qrCodeData.url }}
                        </p>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button @click="closeQrCode">关闭</Button>
                <Button type="primary" @click="refreshQrCode" :loading="qrCodeLoading">刷新二维码</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import plaAccountServer from '@/api/profile/pla_account_server.js'
import taskStatusServer from '@/api/task/task_status_server.js'

export default {
    name: 'PlaAccountDetail',
    data() {
        return {
            accountInfo: {},
            activeTab: 'tasks',

            // 运行操作菜单列表（统一使用下划线命名）
            actionMenuList: [
                {
                    value: 'get_login_qr_code',
                    label: '用户登录',
                    icon: 'ios-log-in',
                    commandType: 'get_login_qr_code',
                    commandName: '获取登录二维码'
                },
                {
                    value: 'open_bot_detection',
                    label: '打开测试页',
                    icon: 'ios-bug',
                    commandType: 'open_bot_detection',
                    commandName: '打开测试页'
                },
                {
                    value: 'get_user_info',
                    label: '获取用户信息',
                    icon: 'ios-person',
                    commandType: 'get_user_info',
                    commandName: '获取用户信息'
                },
                {
                    value: 'get_online_resume',
                    label: '获取用户简历',
                    icon: 'ios-document',
                    commandType: 'get_online_resume',
                    commandName: '获取在线简历'
                },
                {
                    value: 'search_jobs',
                    label: '搜索岗位',
                    icon: 'ios-search',
                    commandType: 'search_jobs',
                    commandName: '搜索岗位'
                },
                {
                    value: 'get_job_list',
                    label: '获取岗位列表',
                    icon: 'ios-list-box',
                    commandType: 'get_job_list',
                    commandName: '获取岗位列表'
                },
                {
                    value: 'get_chat_list',
                    label: '获取聊天列表',
                    icon: 'ios-chatbubbles',
                    commandType: 'get_chat_list',
                    commandName: '获取聊天列表'
                }
            ],

            // 任务列表相关
            tasksLoading: false,
            tasksData: [],
            tasksPageOption: {
                page: 1,
                pageSize: 10,
                total: 0
            },
            taskColumns: [
                { title: '任务ID', key: 'id', minWidth: 100 },
                {
                    title: '任务类型',
                    key: 'taskType',
                    minWidth: 120,
                    render: (h, params) => {
                        const typeMap = {
                            'search': { text: '搜索', color: 'blue' },
                            'apply': { text: '申请', color: 'green' },
                            'chat': { text: '聊天', color: 'purple' }
                        }
                        const type = typeMap[params.row.taskType] || { text: params.row.taskType, color: 'default' }
                        return h('Tag', { props: { color: type.color } }, type.text)
                    }
                },
                { title: '任务名称', key: 'taskName', minWidth: 200 },
                {
                    title: '状态',
                    key: 'status',
                    minWidth: 100,
                    render: (h, params) => {
                        const statusMap = {
                            'pending': { text: '待执行', color: 'default' },
                            'running': { text: '执行中', color: 'blue' },
                            'completed': { text: '已完成', color: 'success' },
                            'success': { text: '成功', color: 'success' },
                            'failed': { text: '失败', color: 'error' },
                            'cancelled': { text: '已取消', color: 'warning' }
                        }
                        const status = statusMap[params.row.status] || { text: params.row.status, color: 'default' }
                        return h('Tag', { props: { color: status.color } }, status.text)
                    }
                },
                {
                    title: '创建时间',
                    key: 'create_time',
                    minWidth: 150,
                    render: (h, params) => {
                        return h('span', this.formatDateTime(params.row.create_time))
                    }
                },
                {
                    title: '结束时间',
                    key: 'endTime',
                    minWidth: 150,
                    render: (h, params) => {
                        return h('span', this.formatDateTime(params.row.endTime) || '-')
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    render: (h, params) => {
                        const btns = []
                        if (params.row.status === 'failed') {
                            btns.push({
                                title: '重试',
                                type: 'primary',
                                click: () => this.retryTask(params.row)
                            })
                        }
                        if (params.row.status === 'pending' || params.row.status === 'running') {
                            btns.push({
                                title: '取消',
                                type: 'warning',
                                click: () => this.cancelTask(params.row)
                            })
                        }
                        return h('div', btns.map(btn =>
                            h('Button', {
                                props: {
                                    type: btn.type,
                                    size: 'small'
                                },
                                style: { marginRight: '5px' },
                                on: {
                                    click: btn.click
                                }
                            }, btn.title)
                        ))
                    }
                }
            ],

            // 指令列表相关
            commandsLoading: false,
            commandsData: [],
            commandsPageOption: {
                page: 1,
                pageSize: 10,
                total: 0
            },
            // 指令详情弹窗
            commandDetailVisible: false,
            currentCommandDetail: null,

            // 二维码弹窗
            qrCodeVisible: false,
            qrCodeLoading: false,
            qrCodeError: '',
            qrCodeData: null,
            commandColumns: [
                { title: 'ID', key: 'id' },
                { title: '序号', key: 'sequence' },
                {
                    title: '指令类型',
                    key: 'command_type',
                    render: (h, params) => {
                        const typeMap = {
                            'browser': 'blue',
                            'search': 'cyan',
                            'fill': 'geekblue',
                            'click': 'purple',
                            'wait': 'orange',
                            'screenshot': 'magenta',
                            'extract': 'green'
                        }
                        return h('Tag', {
                            props: { color: typeMap[params.row.command_type] || 'default' }
                        }, params.row.command_type)
                    }
                },
                { title: '指令名称', key: 'command_name' },
                {
                    title: '状态',
                    key: 'status',
                    render: (h, params) => {
                        const statusMap = {
                            'pending': { text: '待执行', color: 'default' },
                            'running': { text: '执行中', color: 'blue' },
                            'completed': { text: '已完成', color: 'success' },
                            'failed': { text: '失败', color: 'error' },
                            'cancelled': { text: '已取消', color: 'warning' }
                        }
                        const status = statusMap[params.row.status] || { text: params.row.status, color: 'default' }
                        return h('Tag', {
                            props: { color: status.color }
                        }, status.text)
                    }
                },
                {
                    title: '执行时长(s)',
                    key: 'duration',
                    render: (h, params) => {
                        const duration = params.row.duration || 0
                        const seconds = Math.round(duration / 1000)
                        return h('span', `${seconds}`)
                    }
                },
                { title: '重试次数', key: 'retry_count' },
                {
                    title: '创建时间',
                    key: 'create_time',
                    minWidth: 150,
                    render: (h, params) => {
                        return h('span', this.formatDateTime(params.row.create_time))
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 120,
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            on: {
                                click: () => this.showCommandDetail(params.row)
                            }
                        }, '详情')
                    }
                }
            ]
        }
    },
    mounted() {

        this.loadAccountInfo()
        this.queryTasks(1)
        this.queryCommands(1)
    },
    computed: {
        // 从路由参数获取账号ID
        accountId() {
            return this.$route.query.id
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            this.$router.go(-1)
        },
        // 加载账号信息
        async loadAccountInfo() {
            try {

                const res = await plaAccountServer.getById(this.accountId)
                this.accountInfo = res.data || {}
            } catch (error) {
                console.error('加载账号信息失败:', error)
                this.$Message.error('加载账号信息失败')
                this.accountInfo = {}
            }
        },

        // 查询任务列表
        async queryTasks(page) {
            this.tasksLoading = true
            try {
                this.tasksPageOption.page = page
                const param = {
                    seachOption: {
                        account_id: this.accountId
                    },
                    pageOption: this.tasksPageOption
                }
                const res = await plaAccountServer.getTasks(this.accountId, param)
                this.tasksData = res.data.rows || []
                this.tasksPageOption.total = res.data.count || 0
            } catch (error) {
                this.$Message.error('加载任务列表失败')
                this.tasksData = []
                this.tasksPageOption.total = 0
            } finally {
                this.tasksLoading = false
            }
        },

        // 查询指令列表
        async queryCommands(page) {
            this.commandsLoading = true
            try {
                this.commandsPageOption.page = page
                const param = {
                    seachOption: {
                        account_id: this.accountId
                    },
                    pageOption: this.commandsPageOption
                }
                const res = await plaAccountServer.getCommands(this.accountId, param)
                this.commandsData = res.data.rows || []
                this.commandsPageOption.total = res.data.count || 0
            } catch (error) {
                this.$Message.error('加载指令列表失败')
                this.commandsData = []
                this.commandsPageOption.total = 0
            } finally {
                this.commandsLoading = false
            }
        },

        // 重试任务
        async retryTask(task) {
            try {
                await taskStatusServer.retry(task)
                this.$Message.success('重试任务成功')
                this.queryTasks(this.tasksPageOption.page)
            } catch (error) {
                console.error('重试任务失败:', error)
                this.$Message.error('重试任务失败')
            }
        },

        // 取消任务
        async cancelTask(task) {
            this.$Modal.confirm({
                title: '确认取消',
                content: '确定要取消这个任务吗？',
                onOk: async () => {
                    try {
                        await taskStatusServer.cancel(task)
                        this.$Message.success('取消任务成功')
                        this.queryTasks(this.tasksPageOption.page)
                    } catch (error) {
                        console.error('取消任务失败:', error)
                        this.$Message.error('取消任务失败')
                    }
                }
            })
        },

        // 刷新任务列表
        refreshTasks() {
            this.queryTasks(this.tasksPageOption.page)
        },

        // 刷新指令列表
        refreshCommands() {
            this.queryCommands(this.commandsPageOption.page)
        },

        // Tab切换
        handleTabChange(name) {
            this.activeTab = name
            if (name === 'tasks') {
                this.queryTasks(this.tasksPageOption.page)
            } else if (name === 'commands') {
                this.queryCommands(this.commandsPageOption.page)
            }
        },

        // 处理刷新
        handleRefresh() {
            if (this.activeTab === 'tasks') {
                this.refreshTasks()
            } else if (this.activeTab === 'commands') {
                this.refreshCommands()
            }
        },

        // 处理运行操作
        async handleRunAction(action) {
            // 如果是获取登录二维码，检查登录状态
            if (action === 'get_login_qr_code') {
                // 如果未登录，直接显示二维码
                if (!this.accountInfo.is_logged_in) {
                    this.showQrCode()
                    return
                }
                // 如果已登录，显示确认框
                this.$Modal.confirm({
                    title: '确认用户登录',
                    content: '该账号已登录，确定要重新获取登录二维码吗？',
                    onOk: () => {
                        this.showQrCode()
                    }
                })
                return
            }

            // 从菜单列表中查找对应的配置
            const actionItem = this.actionMenuList.find(item => item.value === action)
            if (!actionItem) {
                this.$Message.error('未知的操作类型')
                return
            }

            const config = {
                name: actionItem.label,
                commandType: actionItem.commandType,
                commandName: actionItem.commandName
            }

            this.$Modal.confirm({
                title: `确认${config.name}`,
                content: `确定要执行"${config.name}"操作吗？`,
                onOk: async () => {
                    try {
                        await plaAccountServer.runCommand({
                            id: this.accountId,
                            commandType: config.commandType,
                            commandName: config.commandName
                        })
                        this.$Message.success(`${config.name}指令执行成功`)
                        // 刷新指令列表
                        setTimeout(() => {
                            this.queryCommands(this.commandsPageOption.page)
                        }, 1000)
                    } catch (error) {
                        console.error(`${config.name}失败:`, error)
                        this.$Message.error(`${config.name}失败: ${error.message || '执行失败'}`)
                    }
                }
            })
        },

        // 显示二维码
        async showQrCode() {
            this.qrCodeVisible = true
            this.qrCodeLoading = true
            this.qrCodeError = ''
            this.qrCodeData = null

            try {
                // 执行获取二维码指令
                const res = await plaAccountServer.runCommand({
                    id: this.accountId,
                    commandType: 'get_login_qr_code',
                    commandName: '获取登录二维码'
                })

                // 从响应中直接获取二维码数据
                if (res.data && res.data.success && res.data.result) {
                    const result = res.data.result

                    // 支持多种数据结构
                    if (result.qr_code_url) {
                        this.qrCodeData = {
                            qrCode: result.qr_code_url,
                            oos_url: result.oos_url,
                            url: result.qr_code_url
                        }
                    } else if (result.oos_url) {
                        this.qrCodeData = {
                            qrCode: result.oos_url,
                            oos_url: result.oos_url,
                            url: result.oos_url
                        }
                    } else if (result.data) {
                        // 如果 data 是对象
                        if (typeof result.data === 'object') {
                            this.qrCodeData = {
                                qrCode: result.data.qr_code_url || result.data.oos_url || result.data.qrCode || result.data.image,
                                oos_url: result.data.oos_url,
                                url: result.data.qr_code_url || result.data.oos_url,
                                ...result.data
                            }
                        } else {
                            // 如果 data 是字符串（可能是图片URL）
                            this.qrCodeData = {
                                qrCode: result.data,
                                data: result.data,
                                url: result.data
                            }
                        }
                    } else {
                        // 其他格式，直接使用整个结果
                        this.qrCodeData = result
                    }

                    this.qrCodeLoading = false
                } else {
                    // 如果没有直接返回结果，轮询等待指令完成
                    await this.waitForQrCodeCommand()
                }
            } catch (error) {
                console.error('获取二维码失败:', error)
                this.qrCodeError = error.message || '获取二维码失败'
                this.qrCodeLoading = false
            }
        },

        // 轮询等待二维码指令完成
        async waitForQrCodeCommand(maxAttempts = 30, interval = 1000) {
            let attempts = 0

            while (attempts < maxAttempts) {
                try {
                    // 刷新指令列表
                    await this.queryCommands(this.commandsPageOption.page)

                    // 查找最新的获取登录二维码指令（按创建时间倒序）
                    const qrCodeCommands = this.commandsData.filter(cmd =>
                        cmd.command_name === '获取登录二维码'
                    )

                    if (qrCodeCommands.length > 0) {
                        const latestCommand = qrCodeCommands[0]

                        // 如果指令已完成
                        if (latestCommand.status === 'completed') {
                            await this.fetchQrCodeFromCommand(latestCommand.id)
                            return
                        }

                        // 如果指令失败
                        if (latestCommand.status === 'failed') {
                            this.qrCodeError = latestCommand.error_message || '获取二维码失败'
                            this.qrCodeLoading = false
                            return
                        }

                        // 如果指令还在执行中，继续等待
                    }

                    attempts++
                    await new Promise(resolve => setTimeout(resolve, interval))
                } catch (error) {
                    console.error('等待二维码指令失败:', error)
                    this.qrCodeError = error.message || '等待二维码指令失败'
                    this.qrCodeLoading = false
                    return
                }
            }

            // 超时
            this.qrCodeError = '获取二维码超时，请稍后刷新'
            this.qrCodeLoading = false
        },

        // 从指令详情获取二维码数据
        async fetchQrCodeFromCommand(commandId) {
            try {
                // 获取指令详情
                const res = await plaAccountServer.getCommandDetail(this.accountId, commandId)
                const commandDetail = res.data

                if (!commandDetail) {
                    this.qrCodeError = '未找到指令详情'
                    this.qrCodeLoading = false
                    return
                }

                // 从执行结果中提取二维码数据
                if (commandDetail.result) {
                    const result = typeof commandDetail.result === 'string'
                        ? JSON.parse(commandDetail.result)
                        : commandDetail.result

                    // 查找二维码数据（支持多种数据结构）
                    if (result.data) {
                        // 如果 data 是对象，可能包含二维码信息
                        if (typeof result.data === 'object') {
                            this.qrCodeData = result.data
                        } else {
                            // 如果 data 是字符串（可能是图片URL）
                            this.qrCodeData = { qrCode: result.data, data: result.data }
                        }
                    } else if (result.qrCode) {
                        this.qrCodeData = { qrCode: result.qrCode }
                    } else if (result.image) {
                        this.qrCodeData = { image: result.image }
                    } else if (result.qrcode) {
                        this.qrCodeData = { qrCode: result.qrcode }
                    } else if (typeof result === 'string') {
                        // 如果结果直接是字符串（可能是base64或URL）
                        this.qrCodeData = { qrCode: result, data: result }
                    } else {
                        this.qrCodeData = result
                    }

                    // 如果还没有找到二维码图片，尝试从结果中查找
                    if (!this.qrCodeData.qrCode && !this.qrCodeData.image && !this.qrCodeData.data) {
                        // 尝试查找所有可能的图片字段
                        const imageFields = ['qr_code', 'qrCode', 'qrcode', 'qr', 'code', 'img', 'image', 'url']
                        for (const field of imageFields) {
                            if (this.qrCodeData[field]) {
                                this.qrCodeData = { qrCode: this.qrCodeData[field] }
                                break
                            }
                        }
                    }
                } else {
                    this.qrCodeError = '未找到二维码数据'
                }

                this.qrCodeLoading = false
            } catch (error) {
                console.error('获取二维码数据失败:', error)
                this.qrCodeError = error.message || '获取二维码数据失败'
                this.qrCodeLoading = false
            }
        },

        // 刷新二维码
        refreshQrCode() {
            this.showQrCode()
        },

        // 关闭二维码弹窗
        closeQrCode() {
            this.qrCodeVisible = false
            this.qrCodeLoading = false
            this.qrCodeError = ''
            this.qrCodeData = null
        },

        // 获取平台颜色
        getPlatformColor(platformId) {
            const colorMap = {
                '1': 'blue',    // Boss直聘
                '2': 'green'    // 猎聘
            }
            return colorMap[platformId] || 'default'
        },

        // 获取平台文本
        getPlatformText(platformId) {
            const textMap = {
                '1': 'Boss直聘',
                '2': '猎聘'
            }
            return textMap[platformId] || platformId
        },

        // 显示指令详情
        async showCommandDetail(command) {
            try {
                const res = await plaAccountServer.getCommandDetail(this.accountId, command.id)
                this.currentCommandDetail = res.data || command
                this.commandDetailVisible = true
            } catch (error) {
                console.error('获取指令详情失败:', error)
                this.$Message.error('获取指令详情失败')
                // 如果接口不存在，直接使用当前指令数据
                this.currentCommandDetail = command
                this.commandDetailVisible = true
            }
        },

        // 关闭指令详情弹窗
        closeCommandDetail() {
            this.commandDetailVisible = false
            this.currentCommandDetail = null
        },

        // 获取指令类型颜色
        getCommandTypeColor(type) {
            const colorMap = {
                'browser': 'blue',
                'search': 'cyan',
                'fill': 'geekblue',
                'click': 'purple',
                'wait': 'orange',
                'screenshot': 'magenta',
                'extract': 'green'
            }
            return colorMap[type] || 'default'
        },

        // 获取指令状态颜色
        getCommandStatusColor(status) {
            const colorMap = {
                'pending': 'default',
                'running': 'blue',
                'completed': 'success',
                'failed': 'error',
                'cancelled': 'warning'
            }
            return colorMap[status] || 'default'
        },

        // 获取指令状态文本
        getCommandStatusText(status) {
            const textMap = {
                'pending': '待执行',
                'running': '执行中',
                'completed': '已完成',
                'failed': '失败',
                'cancelled': '已取消'
            }
            return textMap[status] || status
        },

        // 获取执行时间
        getExecutionTime(duration) {
            if (!duration) return '-'
            const seconds = Math.round(duration / 1000)
            return `${seconds}秒`
        },

        // 格式化JSON
        formatJSON(data) {
            try {
                return JSON.stringify(data, null, 2)
            } catch (error) {
                return data
            }
        },

        // 处理图片加载错误
        handleImageError(event) {
            event.target.style.display = 'none'
            this.$Message.warning('截图加载失败')
        },

        // 处理二维码图片加载错误
        handleQrCodeImageError(event) {
            event.target.style.display = 'none'
            this.$Message.warning('二维码图片加载失败，请刷新重试')
        },

        // 格式化日期时间
        formatDateTime(datetime) {
            if (!datetime) return '-'
            const date = new Date(datetime)
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            const seconds = String(date.getSeconds()).padStart(2, '0')
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        }
    }
}
</script>

<style scoped>
.account-detail-container {
    background: #f7f8fa;
    min-height: 600px;
}

/* 页面头部 */
.page-header {
    background: #fff;
    padding: 16px 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e8eaec;
    display: flex;
    align-items: center;
}

.tabs-card>>>.ivu-tabs-bar {
    padding: 12px;
    margin-bottom: 0px;
}

.header-left {
    display: flex;
    align-items: center;
}

.back-btn {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-right: 16px;
    color: #2d8cf0;
    font-size: 14px;
}

.back-btn:hover {
    background: #f0f5ff;
}

.header-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #17233d;
}

/* 账号信息卡片 */
.account-info-card {
    margin-bottom: 16px;
}

.account-info {
    padding: 20px;
}

.account-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8eaec;
}

.account-avatar {
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #f0f5ff;
    border-radius: 50%;
}

.account-basic {
    flex: 1;
}

.account-name {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #17233d;
}

.account-meta {
    display: flex;
    gap: 8px;
}

.account-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.account-details .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.account-details .label {
    min-width: 100px;
    color: #515a6e;
    font-weight: 500;
}

.account-details .value {
    color: #17233d;
    word-break: break-all;
}

/* Tab卡片 */
.tabs-card {
    background: #fff;
}

.tabs-card>>>.ivu-card-body {
    padding: 0;
}

/* Tab内容 */
.tab-content {
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.tab-body {
    flex: 1;
    padding: 20px;
    overflow: visible;
}

/* Tab右侧按钮 */
.tabs-extra {
    display: flex;
    align-items: center;
    padding-right: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .account-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-actions {
        margin-left: 0;
        margin-top: 16px;
        width: 100%;
    }

    .account-details .detail-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-details .label {
        margin-bottom: 4px;
    }
}

/* 表格样式优化 */
.tab-body>>>.ivu-table {
    font-size: 13px;
}

.tab-body>>>.ivu-table th {
    background: #f8f8f9;
    font-weight: 600;
}

.tab-body>>>.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td {
    background-color: #fafafa;
}

.tab-body>>>.ivu-table td {
    padding: 12px 8px;
}

/* 加载状态 */
.ivu-spin-fix {
    background: rgba(255, 255, 255, 0.8);
}

/* 指令详情弹窗样式 */
.command-detail-content {
    max-height: 600px;
    overflow-y: auto;
}

.command-detail-content .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.command-detail-content .label {
    min-width: 80px;
    color: #515a6e;
    font-weight: 500;
}

.command-detail-content .value {
    color: #17233d;
    word-break: break-all;
}

.detail-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e8eaec;
}

.section-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #17233d;
}

.error-title {
    color: #ed4014;
}

.code-block {
    background: #f8f8f9;
    border: 1px solid #e8eaec;
    border-radius: 4px;
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.code-block pre {
    margin: 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: #17233d;
    white-space: pre-wrap;
    word-break: break-all;
}

.error-block {
    background: #fef0f0;
    border: 1px solid #fbc4c4;
    border-radius: 4px;
    padding: 12px;
    max-height: 150px;
    overflow-y: auto;
}

.error-block pre {
    margin: 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: #ed4014;
    white-space: pre-wrap;
    word-break: break-all;
}

.screenshot-block {
    text-align: center;
    padding: 12px;
    background: #f8f8f9;
    border: 1px solid #e8eaec;
    border-radius: 4px;
}

.screenshot-img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 弹窗内容滚动条样式 */
.command-detail-content::-webkit-scrollbar,
.code-block::-webkit-scrollbar,
.error-block::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.command-detail-content::-webkit-scrollbar-track,
.code-block::-webkit-scrollbar-track,
.error-block::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.command-detail-content::-webkit-scrollbar-thumb,
.code-block::-webkit-scrollbar-thumb,
.error-block::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.command-detail-content::-webkit-scrollbar-thumb:hover,
.code-block::-webkit-scrollbar-thumb:hover,
.error-block::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 二维码弹窗样式 */
.qr-code-content {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.qr-code-loading {
    text-align: center;
    padding: 40px;
}

.loading-icon {
    animation: spin 1s linear infinite;
    color: #2d8cf0;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.qr-code-loading p {
    margin-top: 16px;
    color: #515a6e;
    font-size: 14px;
}

.qr-code-error {
    text-align: center;
    padding: 40px;
}

.qr-code-error p {
    margin-top: 16px;
    color: #ed4014;
    font-size: 14px;
}

.qr-code-display {
    width: 100%;
    text-align: center;
}

.qr-code-image {
    margin-bottom: 20px;
}

.qr-code-image img {
    max-width: 100%;
    max-height: 400px;
    border: 1px solid #e8eaec;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-code-text {
    background: #f8f8f9;
    border: 1px solid #e8eaec;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 20px;
    max-height: 200px;
    overflow-y: auto;
}

.qr-code-text pre {
    margin: 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: #17233d;
    white-space: pre-wrap;
    word-break: break-all;
}

.qr-code-tip {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e8eaec;
}

.qr-code-tip p {
    margin: 8px 0;
    color: #515a6e;
    font-size: 14px;
}

.qr-code-url {
    color: #2d8cf0;
    word-break: break-all;
    font-size: 12px;
}
</style>